<template>
  <r-h-modal v-model:modal="itemModal">
    <r-h-form v-bind="itemForm" ref="rhFormRef" v-model:form-model="itemForm.formModel" />
  </r-h-modal>
</template>

<script lang="ts">
import RHModal from '@/components/RHModal/index.vue'
import { defineComponent, toRef, ref } from 'vue'
import RHForm from '@/components/RHForm/index.vue'

export default defineComponent({
  name: 'RHModalForm',
  components: { RHForm, RHModal },
  props: {
    /**
     * 控制弹框打开
     */
    modal: {
      type: Object,
      required: true
    },
    /**
     * 弹框字段表头
     */
    titleForm: {
      type: String
    },
    form: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const itemModal = toRef(props, 'modal')
    // 设置标题
    const itemTitle = itemModal.value.title
    const itemForm = toRef(props, 'form')
    // 初始化 formModel
    if (!itemForm.value.formModel) {
      itemForm.value.formModel = {}
    }
    // 设置表单标题
    if (itemTitle.value === '') {
      const titleForm = toRef(props, 'titleForm')
      if (titleForm.value) {
        itemModal.value.title = itemForm.value.formModel[titleForm.value]
      }
    }
    // vue3 设置ref
    const rhFormRef = ref()
    itemModal.value.ok = () => {
      console.log(rhFormRef.value.getFormRef())

      rhFormRef.value.getFormRef()
        .validateFields()
        .then((values:any) => {
          console.log('Received values of form: ', values)
        })
        .catch((info:any) => {
          console.log('Validate Failed:', info)
        })
    }
    return {
      itemModal,
      rhFormRef,
      itemForm
    }
  }
})
</script>

<style scoped>

</style>
